<template>
  <div ref="banner-wrapper" class="banner-wrapper">
    <div class="banner-content">
          <!-- banner 最大外盒子 -->
      <img  class="bannerImg" style="display: block" v-if="bannerList.length == 0" src="/img/home/bannerBj.png" alt=''>
      <ul v-if="bannerList.length != 0" class="banner-box clear-fix">
        <li v-for="(item, index) in bannerList" :key="item.id+index" class="banner-item">
          <a :href="item.imgDestination">
            <img :src='item.imgSrc' alt="">
          </a>
        </li>
      </ul>
      <div v-if="bannerList.length != 0" class="prev btn">
        <span class="icon-zuojiantou"></span>
      </div>
      <div v-if="bannerList.length != 0" class="next btn">
        <span class="icon-youjiantou"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { bannerFn } from '@/api/banner'
import { homeBanner } from '@/api/getData'
export default {
  name: 'home',
  data() {
    return{
      bannerList: [],
      timer: 0
    }
  },
  mounted() {
    let  that = this
    homeBanner.call(this).then(res=>{
      let length = res.length
      if(length == 0) return

      let bannerList = res.concat(res[0])
      this.$set(this, 'bannerList', bannerList)
      let bannerWrapper = this.$refs['banner-wrapper']

      that.$nextTick(()=>{
        bannerFn.call(that ,bannerWrapper)
      })
      that.addEvent(window, 'resize', function(){
        clearInterval(that.timer)
        that.$nextTick(()=>{
          bannerFn.call(that ,bannerWrapper)
        })
      })
    })
    
  },
  methods: {
    mouseChange(sign){
      let frameLeft = this.$refs['frameLeft']
      let frameRight = this.$refs['frameRight']
      if(sign == 1 ){
        frameRight.style.opacity = 1
        frameLeft.style.opacity = 1
      } else {
        setTimeout(()=>{
          frameRight.style.opacity = 0
          frameLeft.style.opacity = 0
        }, 250)
      }
      
    },
    addEvent( obj , type , eFn ) {
      function fn(e , b){
          e = e || window.event;
          eFn.call( obj , e  ) //处理this指向跟event问题
      }
      if( window.addEventListener ){
          obj.addEventListener( type , fn ,false )
      } else {
          obj.attachEvent( 'on' + type , fn )
      }
      return fn; //把上面的fn函数return上面 上面用一个变量来接收  为了清除事件
    }
  }
}
</script>

<style lang="stylus" scoped>

.banner-wrapper{
  width: 100%;
  .banner-content{
    position: relative;
    width: 100%;
    height: 600px;
    .bannerImg{
      width: 100%;
      min-width: 1200px;
      cursor: pointer;
    }
  }

  .banner-box{
    // @extend .clear-fix;
    position: absolute;
    left: 0;
    .banner-item{
      position: absolute;
      
      img{
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
      }

      .banner-text{
        position: absolute;
        width: 816px;
        top: 50%;
        left: 50%;
        margin-left: -408px;
        margin-top: 184px;
        cursor: pointer;
        @media (min-width: 1640px){
          margin-top: 284px;
        }

        .title{
            position: relative;
            font-size: 48px;
            font-family: MicrosoftYaHei-Bold;
            font-weight: bold;
            text-align: center;
            .text{
              position: relative;
              z-index: 2;
            }
            .line{
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              content: '';
              width: 350px;
              height: 12px;
              margin: auto;
              background-color: rgba(20,87,253,1);
              z-index: 0;
              box-shadow:0px -11px 32px 17px rgba(0,0,0,0.16);
            }
          }

        // 轮播图标签
        .label-wrapper{
          // @extend .clear-fix;
          width: 100%;
          margin-top: 68px;
          text-align: center;  

          .label-bottom{
            margin-top: 30px;  
          }

          span{
            display: inline-block;
            padding: 9px;
            background-color: rgba(20,87,253,1);
            font-size: 18px;
            color: #ff;
          }
          span + span{
            margin-left: 30px;
          } 
        }

        .check-more{
            margin-top: 60px;
            font-size: 18px;
            font-family:MicrosoftYaHei-Bold;
            font-weight: bold;
            text-align: center;

            .check-text{
              position: relative;
              width: 120px;
              height: 44px;
              line-height: 44px;
              margin: auto;
              .frame{
                position: absolute;
                top: -1px;
                width: 20px;
                height: 40px;
                border: 2px solid #1457FD;
                transition: all 0.25s cubic-bezier(0,1.82,.57,1.58);
                opacity: 0;
              }
              .frame.left{
                left: 40px;
                border-right: 0;
              }
              .frame.right{
                left: 58px;
                border-left: 0;
              }
            }
            
          }
        &:hover .check-more .check-text .left{
            left: -2px;
            width: 60px;
          }

        &:hover .check-more .check-text .right{
          width: 60px;
        }
      }

      

    }
  }

  .btn{
    position: absolute;
    width: 44px;
    height: 44px;
    border: 2px solid #fff;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    transition: all 0.25s;
        
    &:hover{
      background-color: #1457FD;
      border: 2px solid transparent;
    }
  }
}
</style>
